<template>
  <FireWork/>
  <el-container>
    <el-header>
      <el-row class="top-bar">
        <el-col :span="6">
          <div class="grid-content"/>
          <a class="homeContentStyle" @click="gotoHomePage" style="color: black;cursor: pointer">
            首页
          </a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <a @click="goToAddArticlePage" style="color: black;cursor: pointer;">发表文章</a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <a @click="goToArticlePage(17)" style="color: black;cursor: pointer">开发日志</a>
        </el-col>
        <el-col :span="6">
          <div class="grid-content"/>
          <Avatar/>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div v-for="news in newsList">
        <el-row class="news-item">
          <el-col :span="4"></el-col>
          <el-col :span="16">
            <a :href="news.newsUrl" class="news-container">
              <div class="news-image">
                <el-image :src="news.imageUrl"></el-image>
              </div>
              <div class="news-content">
                <h2 class="news-title">{{ news.title }}</h2>
                <el-text class="news-description">{{ news.desc }}</el-text>
                <!--                <el-text>{{ news.newsPopularityIndex }}</el-text>-->
              </div>
            </a>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
  <Footer/>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {useUserinfo} from '@/components/hooks/useUserinfo'
import {GetNewsList} from '@/api/member/news.js'
import Avatar from '@/components/Avatar/Avatar.vue'
import Footer from '@/components/Footer/Footer.vue'


const router = useRouter()
const {userinfo} = useUserinfo()
const {proxy: ctx} = getCurrentInstance() // 可以把ctx当成vue2中的this


// 新闻数据
const newsList = ref([]);
const fetchNews = async () => {
  try {
    const {code, data, msg} = await GetNewsList();
    if (code === 200) {
      newsList.value = data;
    } else {
      ctx.$message.error(msg)
    }
  } catch (error) {
    ctx.$message.error(error)
  }
}


// 跳转到主页
const gotoHomePage = () => {
  router.push('/home')
}

// 跳转发布文章页面
const goToAddArticlePage = () => {
  router.push('/goToAddArticlePage')
}

// 跳转文章详细页面
const goToArticlePage = (id) => {
  const resolved = router.resolve({
    name: 'ArticlePage',
    params: {id}
  });
  window.open(resolved.href, '_blank');
}

onMounted(() => {
  fetchNews();
})

</script>


<style>

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.top-bar {
  text-align: center;
}


/*新闻数据展示*/
.news-container {
  display: flex;
  align-items: flex-start;
}

.news-item {
  margin-top: 20px;
  margin-bottom: 20px;
}

.news-image {
  width: 128px; /* 根据需要调整图片宽度 */
  height: 85px; /* 根据需要调整图片高度 */
  object-fit: cover; /* 确保图片在指定尺寸内完整显示 */
  margin-right: 20px; /* 图片与文本内容之间的间距 */
}

.news-content {
  flex-grow: 1; /* 文本内容占据剩余空间 */
}

.news-title {
  font-weight: bold; /* 字体加粗 */
  padding-top: 10px; /* 距离div的上端距离设置*/
}

.news-title:hover {
  color: lightskyblue;
}

.news-description {
  margin-top: 30px; /* 标题与简介之间的间距 */
}

</style>
